<template>
  <el-date-picker
    v-bind="$attrs"
    :picker-options="pickerOptions"
    v-on="$listeners"
    @change="handleChange"
  />
</template>

<script>
import Vue from 'vue';
import {DatePicker} from 'element-ui';
Vue.use(DatePicker);
/**
 * [日期选择](https://element.eleme.cn/2.13/#/zh-CN/component/date-picker)
 * @author maolin
 */
export default {
  name: "EaDatePicker",
  props: {
    /**
     * [选择选项](https://element.eleme.cn/2.13/#/zh-CN/component/date-picker#picker-options)
     * @public
     */
    pickerOptions: {
      type: Object,
      default () {
        return {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        };
      }
    }
  },
  methods: {
    /**
     * 传递日期给父组件
     * @param {Date} e 日期对象
     * @public
     */
    handleChange (e) {
      this.$emit('change', e);
    }
  }
};
</script>

<style scoped>

</style>
